<template>
	<!-- index.wxml -->
	<view class="sc_index">
		<!-- 搜索框 开始 -->
		<uni-nav-bar :class="isTop?'fixed':''" color="#000" background-color="#fff" right-icon="scan"
			@clickRight="scanCode">
			<block slot="left">
				<view class="city">
					<view class="content">
						<pickerAddress @change="change">{{txt}}</pickerAddress>
					</view>
				</view>
			</block>
			<view class="input-view">
				<uni-icons style="line-height: 30px;" type="search" size="16" color="#666666" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="优选好物" @click="toSearch">
			</view>
		</uni-nav-bar>
		<!-- 搜索框 结束 -->
		<!-- 轮播图 开始 -->
		<view class="index_swiper">
			<swiper autoplay="true" indicator-dots="true" circular="true">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<navigator :url="item.navigator_url">
						<image mode="widthFix" :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图 结束 -->
		<!-- 导航 开始 -->
		<view class="index_cate">
			<navigator v-for="(item, index) in cateList" :key="index" url="/pages/category/category"
				open-type="switchTab">
				<image mode="widthFix" :src="item.image_src"></image>
			</navigator>
		</view>
		<!-- 导航 结束 -->
		<!-- 楼层 开始 -->
		<view class="index_floor">
			<view v-for="(item1, index1) in floorList" :key="index1" class="floor_group">
				<!-- 标题 -->
				<view class="floor_title">
					<image :src="item1.floor_title.image_src" mode="widthFix"></image>
				</view>
				<!-- 内容 -->
				<view class="floor_list">
					<navigator v-for="(item2, index2) in item1.product_list" :key="index2"
						url="/pages/goods_list/goods_list?query=外套">
						<image :mode="index2===0?'widthFix':'scaleToFill'" :src="item2.image_src"></image>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 楼层 结束 -->
	</view>
</template>

<script>
	// index.js
	// 引入用来发送请求的方法 一定要把路径补全
	import {
		request
	} from "../../request/index.js";
	import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue';

	export default {
		data() {
			return {
				//是否置顶
				isTop: false,
				//获取地址
				txt: '选择地址',
				title: 'Hello',
				// 轮播图数据
				swiperList: [],
				// 导航数据
				cateList: [],
				// 楼层数据
				floorList: [],
				index2: 0
			};
		},

		components: {
			pickerAddress
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getSwiperList();
			this.getCateList();
			this.getFloorList();
		},
		//滚动置顶
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.isTop = true;
			} else {
				this.isTop = false;
			}
		},
		methods: {
			//搜索
			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			//获取地址
			change(data) {
				this.txt = data.data.join('')
				console.log(data.data.join(''))
			},
			//调用扫码
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 获取轮播图数据
			getSwiperList() {
				request({
					url: "/home/swiperdata"
				}).then(result => {
					result.forEach((v, i) => {
						result[i].navigator_url = v.navigator_url.replace('main', 'goods_detail');
					});
					this.setData({
						swiperList: result
					});
				});
			},

			// 获取分类导航数据
			getCateList() {
				request({
					url: "/home/catitems"
				}).then(result => {
					this.setData({
						cateList: result
					});
				});
			},

			// 获取楼层数据
			getFloorList() {
				request({
					url: "/home/floordata"
				}).then(result => {
					this.setData({
						floorList: result
					});
				});
			}

		}
	};
</script>
<style>
	@import "./index.css";

	.fixed {
		position: fixed;
		width: 100%;
		top: 84rpx;
		/* #ifdef APP-PLUS || MP-WEIXIN */
		top: 0rpx;
		/* #endif */
		left: 0;
		z-index: 9999
	}

	.city {
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		width: 370rpx;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>
